<template>
  <div id="#main">
    <p class="like">猜你喜欢</p>
    <div class="mainbox">
      <ul>
        <li v-for="(value,key,index) in bookslist" :key="index" @touchstart="golistenmain">
          <div>
            <img :src="value.booksimg" alt />
          </div>
          <p>{{value.name}}</p>
        </li>
        <div class="lot">查看更多</div>
      </ul>
    </div>

    <div class="bottom">
      <div>
        <hr />
        <span>我是有底线的</span>
        <hr />
      </div>
    </div>
    <div class="bottombox"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookslist: {
        books1: {
          name: "夜莺与玫瑰",
          booksimg: require("@/assets/u218.png")
        },
        books2: {
          name: "电影的宿命",
          booksimg: require("@/assets/u217.png")
        },
        books3: {
          name: "夜莺与玫瑰",
          booksimg: require("@/assets/u216.png")
        },
        books4: {
          name: "赤壁之戟",
          booksimg: require("@/assets/u215.png")
        },
        books5: {
          name: "重返昨日世界",
          booksimg: require("@/assets/u214.png")
        },
        books6: {
          name: "烽火与流星",
          booksimg: require("@/assets/u213.png")
        }
      }
    };
  },
  methods: {
    golistenmain(){
      this.$router.push({
        path:'/listeningbook'
      },()=>{})
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  .like {
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
    font-weight: 500;
    font-style: normal;
    font-size: 1.8rem;
    text-align: left;
    line-height: 2.6rem;
    margin-bottom: 1rem;
  }
  .mainbox {
    overflow: hidden;
    padding-right: 1.5rem;
    height: 45rem;
    ul {
      display: flex;
      box-sizing: border-box;
      list-style: none;
      overflow: auto;
      padding: 0rem 1.5rem;
      min-height: 47rem;
      width: 100%;
      li {
        margin-right: 1rem;
        p {
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          font-style: normal;
          font-size: 1.3rem;
          text-align: center;
        }
      }
      .lot {
        box-sizing: border-box;
        width: 4.2rem;
        height: 11.6rem;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        font-style: normal;
        font-size: 1.2rem;
        color: #999999;
        float: left;
        writing-mode: vertical-rl;
        text-align: center;
        padding-right: 1.2rem;
        padding-left: 1.2rem;
        background-color: #f2f2f2;
        border-radius: .9rem;
        letter-spacing: .5rem;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 11.6rem;
    font-size: 1.2rem;
    color: #cccccc;
    padding-top: 2rem;
    div {
      font-family: "SourceHanSansSC-Normal", "思源黑体 Normal", "思源黑体";
      font-weight: 400;
      font-style: normal;
      text-align: left;
      height: 1.65rem;
      line-height: 1.65rem;
      position: relative;
      span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      hr:nth-of-type(1) {
        position: absolute;
        width: 10rem;
        top: 50%;
        left: 3rem;
        transform: translateY(-50%);
        border: .1rem solid #f2f2f2;
      }
      hr:nth-of-type(2) {
        position: absolute;
        width: 10rem;
        top: 50%;
        right: 3rem;
        transform: translateY(-50%);
        border: .1rem solid #f2f2f2;
      }
    }
  }
  .bottombox {
    height: 5.1rem;
  }
}
</style>